<template>
  <v-chart class="area" :option="option" />
</template>

<script>
import { use } from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
]);

import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

export default defineComponent({
  name: "Area",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "dark",
  },
  setup: () => {
    const option = ref({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
       grid: {
        left: "0",
        right: "3%",
        top: "8%",
        bottom:"10%",
        containLabel: true,
      },


      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["A1", "A2", "B1", "B2", "C1", "C2"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [450, 210, 20, 200, 100, 250],
          type: "line",
          areaStyle: {},
        },
      ],
      backgroundColor: "transparent",
    });

    return { option };
  },
});
</script>

<style lang="less" scoped>
.area {
  width: 100%;
  height: 100%;
}
</style>
